<template>
  <div class="carousel6">
    <div class="container">
      <div v-fade-in class="carousel-title">天启明通团队</div>
      <M-button v-slide-up @click="handleDetail" />
      <el-carousel
        :autoplay="false"
        arrow="never"
        indicator-position="outside"
        class="carousel-box"
        @change="changeCarousel"
      >
        <el-carousel-item
          v-for="(item, index) in dataList"
          :key="index"
          class="carousel-item-box"
        >
          <div
            v-for="(sub, k) in item"
            :key="k"
            class="carousel-item"
            :class="{ hover: sub.hover }"
            @mouseenter="mouseenter(sub)"
          >
            <div class="carousel-bg">
              <img :src="publicSrc(sub.avatar)" />
              <div class="item-title">{{ sub.nickName }}</div>
              <div class="item-content">{{ sub.remark }}</div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script lang="ts" setup>
const router = useRouter();
import { publicSrc } from "@/utils/common";
const props = defineProps({
  data: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
});

const dataList = computed(() => props.data);

// 切换轮播
const changeCarousel = (index: number) => {
  dataList.value.forEach((el: any, i: number) => {
    el.forEach((sub: any) => {
      sub.hover = false;
    });
    if (index == i && el.length) {
      el[0].hover = true;
    }
  });
};

// 鼠标移入
const mouseenter = (item: any) => {
  dataList.value.forEach((el: any) => {
    el.forEach((sub: any) => {
      sub.hover = false;
    });
  });
  item.hover = true;
};

// 查看人员信息
const handleDetail = () => {
  router.push("/pc/about");
};
</script>
<style lang="scss" scoped>
.carousel6 {
  width: 100%;
  height: 100vh;
  background: url("@/assets/home/carousel6.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .container {
    position: relative;
    height: 100%;
    .carousel-title {
      position: absolute;
      left: 0;
      top: 240px;
      font-size: 36px;
      width: 65%;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 96px;
      color: #fff;
      z-index: 4;
    }
    .more-btn {
      position: absolute;
      left: 1px;
      top: 340px;
    }
    .carousel-box {
      position: absolute;
      left: 0;
      bottom: 100px;
      width: 100%;
      z-index: 4;
      .carousel-item-box {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        .carousel-item {
          height: 300px;
          text-align: center;
          color: #000;
          position: relative;
          .carousel-bg {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 176px;
            background: rgba(255, 255, 255, 0.13);
            backdrop-filter: blur(4px);
            padding: 40px 30px;
            color: #fff;
            line-height: 30px;
            text-align: left;
            box-sizing: border-box;
            transition: all 0.5s;
            img {
              position: absolute;
              left: 50%;
              top: 0;
              width: 0;
              height: 0;
              border-radius: 50%;
              transform: translateX(-50%);
              border: 1px solid #fff;
              opacity: 0;
              transition: all 0.5s;
            }
            .item-title {
              font-size: 20px;
            }
            .item-content {
              transition: all 0.5s;
              font-size: 16px;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              margin-top: 20px;
            }
          }
        }
        .hover {
          img {
            width: 80px !important;
            height: 80px !important;
            opacity: 1 !important;
            top: -40px !important;
          }
          .carousel-bg {
            height: 240px;
            background: linear-gradient(
              to top,
              rgba(25, 91, 166, 0.86) 0%,
              rgba(42, 130, 228, 0) 100%
            );
            .item-content {
              -webkit-line-clamp: 4;
            }
          }
        }
      }
    }
  }
}
:deep(.el-carousel__indicators--outside) {
  margin-top: 60px;
}
:deep(.el-carousel__button) {
  height: 6px;
  width: 20px;
}
:deep(.is-active .el-carousel__button) {
  width: 40px;
}
</style>
